<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>橘子汽车租赁</title>
    <script type='text/javascript' charset='utf-8' src='https://www.layuicdn.com/layui-v2.5.6/layui.js'></script>
	<link rel='stylesheet' type='text/css' href='https://www.layuicdn.com/layui-v2.5.6/css/layui.css' />
	<script type="text/javascript" charset='utf-8' src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
        body{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body style="background-color: #F2F2F2">
<div class="layui-row">
    <div class="layui-row" style="margin: 20px;">
        <div class="layui-card">
            <div class="layui-card-header"><i class="layui-icon layui-icon-search"></i>查询条件</div>
            <div class="layui-card-body layui-row">
                <form class="layui-form layui-form-pane layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">关键字</label>
                        <div class="layui-input-block">
                            <input type="text" name="keyword" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" pane>
                        <label class="layui-form-label">查询类型</label>
                        <div class="layui-input-block">
                            <input type="radio" name="type" value="identity" title="身份证号" checked>
                            <input type="radio" name="type" value="name" title="客户姓名">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon layui-icon-search"></i>查询</button>
                            <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-row" style="margin-left: 20px;margin-right: 20px;">
        <div class="layui-card">
            <div class="layui-card-header">客户列表</div>
            <div class="layui-card-body layui-row">
                <!-- 显示 -->
                <table id="customers" lay-filter="customers"></table>
            </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 表格头部工具栏 -->
<script type="text/html" id="leftBar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加客户</button>
    </div>
</script>
<!-- 右侧工具栏 -->
<script type="text/html" id="rightBar">
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
</script>
<!-- 增加客户模板 -->
<script type="text/html" id="customerTemp">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <input type="text" name="identity" value="{{ d.identity }}" class="layui-input" lay-verify="identity">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" value="{{ d.name }}" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                {{#  if(d.gender === 1){ }}
                <input type="radio" name="gender" value="1" title="男" checked>
                <input type="radio" name="gender" value="2" title="女">
                {{#  } else if (d.gender === 2){ }}
                <input type="radio" name="gender" value="1" title="男">
                <input type="radio" name="gender" value="2" title="女" checked>
                {{#  } }}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" value="{{ d.address }}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" value="{{ d.phone }}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">职位</label>
            <div class="layui-input-block">
                <input type="text" name="career" value="{{ d.career }}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                {{#  if(d.type === 0){ }}
                <button class="layui-btn" lay-submit lay-filter="add"><i class="layui-icon layui-icon-search"></i>新增</button>
                {{#  } else if (d.type === 1){ }}
                <button class="layui-btn" lay-submit lay-filter="update"><i class="layui-icon layui-icon-search"></i>修改</button>
                {{#  } }}
                <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置</button>
            </div>
        </div>
    </form>
</script>
<script type="application/javascript">
    let addDialog = -1;
    layui.use(['layer', 'form', 'table', 'laytpl'], function () {
        let layer = layui.layer;
        let form = layui.form;
        let table = layui.table;
        let laytpl = layui.laytpl;
        table.render({
            id: 'customer',
            elem: '#customers',
            url: 'customer/all', //数据接口
            toolbar: '#leftBar',
            title: '客户数据表',
            page: true, //开启分页
            limit: 9,
            limits: [9, 18, 27, 35, 45, 54],
            defaultToolbar: ['filter', 'print', 'exports'],//工具条
            cols: [ [ //表头
                {field: 'identity', title: '身份证号', width:180, sort: true},
                {field: 'name', title: '姓名', width:120},
                {field: 'gender', title: '性别', width:80, templet: function(d){
                        return d.gender == 1 ? '男' : '女';
                    }
                },
                {field: 'address', title: '地址'},
                {field: 'phone', title: '电话', width:180},
                {field: 'career', title: '职位', width:80},
                {field: 'created', title: '录入时间', width:180},
                {fixed: 'right', title:'操作', toolbar: '#rightBar', width:100}
            ] ],
            response: {
                statusCode: 200, //规定成功的状态码，默认：0
            },
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data.record //解析数据列表
                };
            }
        });
        //头工具栏事件
        table.on('toolbar(customers)', function(obj){
            let checkStatus = table.checkStatus(obj.config.id);
            //新增数据
            if(obj.event == 'add'){
                if(addDialog != -1){
                    layer.close(addDialog);
                }
                let cus = {
                    identity: '',
                    name: '',
                    gender: 1,
                    address: '',
                    phone: '',
                    career: '',
                    type: 0
                }
                let customerTemp = $('#customerTemp').html();
                laytpl(customerTemp).render(cus, function(html) {
                    addDialog = layer.open({
                        type: 1,
                        title: '新增客户',
                        area: ['500px', '500px'],
                        content: html,
                        success: function () {
                            form.render('radio');
                        }
                    });
                });
            }
        });

        //监听行工具事件
        table.on('tool(customers)', function(obj){
            let data = obj.data;
            data.type = 1;
            if(obj.event === 'update'){
                let customerTemp = $('#customerTemp').html();
                laytpl(customerTemp).render(data, function(html) {
                    addDialog = layer.open({
                        type: 1,
                        title: '新增客户',
                        area: ['500px', '500px'],
                        content: html,
                        success: function () {
                            form.render('radio');
                        }
                    });
                });
            }
        });

        //查询
        form.on('submit(search)', function(data){
            let keyword = data.field.keyword;
            let type = data.field.type;
            table.reload('customer', {
                url: 'customer/search/' + type,
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    keyword: keyword
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //修改
        form.on('submit(update)', function(data){
            let identity = data.field.identity;
            let name = data.field.name;
            let gender = data.field.gender;
            let address = data.field.address;
            let phone = data.field.phone;
            let career = data.field.career;
            $.post('customer/update', {
                identity: identity,
                name: name,
                gender: gender,
                address: address,
                phone: phone,
                career: career
            }, function (res) {
                if(res.code == 200){
                    layer.close(addDialog);
                    addDialog = -1;
                    layer.msg('修改成功');
                    table.reload('customer', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    })
                }
            }, 'json');
            return false;
        });

        //新增
        form.on('submit(add)', function(data){
            let identity = data.field.identity;
            let name = data.field.name;
            let gender = data.field.gender;
            let address = data.field.address;
            let phone = data.field.phone;
            let career = data.field.career;
            $.post('customer/add', {
                identity: identity,
                name: name,
                gender: gender,
                address: address,
                phone: phone,
                career: career
            }, function (res) {
                if(res.code == 200){
                    layer.close(addDialog);
                    addDialog = -1;
                    layer.msg('添加成功');
                    table.reload('customer', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    })
                }
            }, 'json');
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //修改

    })
</script>
</html>